<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>简单单页路由</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="../../../libs/bootstrap/4.0.0-beta.3/bootstrap.min.css">
    <script src="../../../libs/jquery/3.2.1/jquery.js"></script>
    <script src="../../../libs/propper.js/1.13.0/umd/popper.js"></script>
    <script src="../../../libs/bootstrap/4.0.0-beta.3/bootstrap.min.js"></script>
    <script src="../../../libs/underscore.js/1.8.3/underscore.js"></script>
    <script src="../../../libs/backbone.js/1.3.3/backbone.js"></script>
    <style>
        #main-view {
            background: #3b76c0;
        }

        .pageview {
            height: 400px;
        }
    </style>
</head>
<script>
    
</script>

<body>
    <nav class="navbar navbar-expand-sm bglight">
        <a class="nav-item nav-link" href="#main-view">首页</a>
        <a class="nav-item nav-link" href="#list-view">列表页面</a>
        <a class="nav-item nav-link" href="#detail-view">列表详情页面</a>
        <a class="nav-item nav-link" href="#main2">首页2</a>
        <a class="nav-item nav-link" href="#list2">列表页面2</a>
        <a class="nav-item nav-link" href="#detail2">列表详情页面2</a>
    </nav>

    <div class="row">
        <div class='col-sm'>
            <div class="pageview" id='main-view'>
                <h3>首页</h3>
                <div title="-list-view" class='right-arrow'></div>
            </div>
            <div class="pageview" style="background: #58c03b;display: none" id="list-view">
                <h3>列表页面</h3>
                <div class="left-arrow"></div>
                <div title="-detail-view" class="right-arrow"></div>
            </div>
            <div class="pageview" style="background: #c03b25;display: none" id="detail-view">
                <h3>列表详情页面</h3>
                <div class="left-arrow"></div>
            </div>
        </div>
        <div class='col-sm'>
            <div class="pageview" style="background: #3b76c0;" id='main2'>
                <h3>首页2</h3>
                <div title="-list-view" class='right-arrow'></div>
            </div>
            <div class="pageview" style="background: #58c03b;display: none" id="list2">
                <h3>列表页面2</h3>
                <div class="left-arrow"></div>
                <div title="-detail-view" class="right-arrow"></div>
            </div>
            <div class="pageview" style="background: #c03b25;display: none" id="detail2">
                <h3>列表详情页面2</h3>
                <div class="left-arrow"></div>
            </div>
        </div>
    </div>
</body>

</html>